<template>
  <div class="shopRanking">

    <div class="cityRanking">
          <h3 class="title">出口目的国/地区TOP5</h3>
            <ul class="list">
              <li>
                <span class="num">排名</span>
                <span class="name" style="width:50%;">目的国
    </span>
                <span class="danliang" style="width:40%">货运量（吨）</span>
              </li>
              <li>
                <span class="num"><i>1</i></span>
                <span class="name" style="width:50%;">纽约</span>
                <span class="danliang" style="width:40%">10,523
    </span>
              </li>
               <li>
                <span class="num"><i>2</i></span>
                <span class="name" style="width:50%;">列日</span>
                <span class="danliang" style="width:40%">10,246 </span>
              </li>
                <li>
                <span class="num"><i>3</i></span>
                <span class="name" style="width:50%;">洛杉矶</span>
                <span class="danliang" style="width:40%">8,468 </span>
              </li>
       <li>
                <span class="num"><i>4</i></span>
                <span class="name" style="width:50%;">伦敦</span>
                <span class="danliang" style="width:40%">879</span>
              </li>

       <li>
                <span class="num"><i>5</i></span>
                <span class="name" style="width:50%;">荷兰</span>
                <span class="danliang" style="width:40%">505</span>
              </li>

            </ul>
        </div>

    <div class="cityRanking">
        <h3 class="title">货物来源地TOP5</h3>
         <ul class="list">
          <li>
            <span class="num">排名</span>
            <span class="name">货物来源地</span>
            <span class="danliang">货物量占比（%）</span>
          </li>
          <li>
            <span class="num"><i>1</i></span>
            <span class="name">深圳</span>
            <span class="danliang">33</span>
          </li>
           <li>
            <span class="num"><i>2</i></span>
            <span class="name">东莞</span>
            <span class="danliang">26</span>
          </li>
           <li>
            <span class="num"><i>3</i></span>
            <span class="name">杭州</span>
            <span class="danliang">12</span>
          </li>
           <li>
            <span class="num"><i>4</i></span>
            <span class="name">上海</span>
            <span class="danliang">10</span>
          </li>
           <li>
            <span class="num"><i>5</i></span>
            <span class="name">河南及其它</span>
            <span class="danliang">9</span>
          </li>

        </ul>
        <!--
        <ul class="list">
          <li v-for="(item,index) in getChinaProvData" :key='index'>
            <span class="num">{{index+1}}</span>
            <span class="name">{{item.PROVINCE}}省</span>
            <span class="danliang">业务单量：<i>{{formatNumberRgx(item.DANLIANG)}}</i></span>
          </li>

        </ul>
        -->
    </div>
    <div class="cityRanking" style="display:none;">
        <h3 class="title">购物城市排名(包)</h3>
        <ul class="list">
         <li v-for="(item,index) in getChinaCityData" :key='index'>
           <span class="num">{{index+1}}</span>
           <span class="name">{{item.CITY}}</span>
           <span class="danliang">业务单量：<i>{{formatNumberRgx(item.DANLIANG)}}</i></span>
         </li>


        </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'cityRanking',
    components: {

    },
    data() {
      return {
        getChinaProvData:[],
        getChinaCityData:[]
      }
    },
    mounted() {
      this.getChinaProvInfo();
      this.getChinaCityInfo();
    },
    methods: {
      formatNumberRgx(num) {
        var parts = num.toString().split(".");
        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return parts.join(".");
      },
      getChinaProvInfo(){
        var that = this;
        that.$myHttp.post("getChinaProvInfo")
          .then(function(data0) {
            if (data0.status == "200") {
              // console.log(data0.data.hn_buyarea_sf)

                if(data0.data.hn_buyarea_sf.length>6){
                  that.getChinaProvData = data0.data.hn_buyarea_sf.slice(0,6);
                }else{
                  that.getChinaProvData = data0.data.hn_buyarea_sf;
                }
                // console.log(that.getChinaProvData,'nx1')
            }  else {
              alert("数据请求错误")
            }

          })
          .catch(function(error) {
            alert(error)
          })
      },
      getChinaCityInfo(){
        var that = this;

        that.$myHttp.post("getChinaCityInfo")
          .then(function(data0) {
            if (data0.status == "200") {

              if(data0.data.hn_buyarea_cs.length>6){
                that.getChinaCityData = data0.data.hn_buyarea_cs.slice(0,6);
              }else{
                that.getChinaCityData = data0.data.hn_buyarea_cs;
              }
              // console.log(that.getChinaCityData,'nx')

            }  else {
              alert("数据请求错误")
            }

          })
          .catch(function(error) {
            alert(error)
          })
      },


    }
  }
</script>

<style scoped>
/*
  .shopRanking {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .cityRanking {
    width: 40%;
    height: 100%;
    overflow: hidden;
  }
  .cityRanking .title{
    color:#fff;
    font-size:.16rem;
    padding-bottom:.2rem;
  }
  .cityRanking .list{
    color:#78c3e9;
    font-size:.12rem;
    height: 80%;
    overflow: hidden;
  }
   .cityRanking .list li{
      padding:.05rem 0;
   }
    .cityRanking .list li{
      display: flex;
      justify-content: space-between;
      align-items:center;

    }
    .cityRanking .list li .num{
      width:.2rem;
      line-height:.2rem;
      height:.2rem;
      display:inline-block;
      text-align: center;
      margin-left:.1rem;
      font-size:.12rem;
      border-radius: .02rem;
      color:#fff;
    }
    .cityRanking .list li:nth-of-type(1) .num{
      background:#47f7f4;
    }
    .cityRanking .list li:nth-of-type(2) .num{
      background:#007ffe;
    }
    .cityRanking .list  li:nth-of-type(3) .num{
       background:#47f7f4;
    }
    .cityRanking .list  li:nth-of-type(4) .num{
      background:#007ffe;
    }
    .cityRanking .list  li:nth-of-type(5) .num{
       background:#47f7f4;
    }
    .cityRanking .list li:nth-of-type(6) .num{
      background:#007ffe;
    }
    .cityRanking .list li .name{
      width:40%;
       text-align: left;
       color:#fff;
       padding-left:5%;

    }
    .cityRanking .list li .danliang{
      width:50%;
       text-align: left;
    }
    .cityRanking .list li i{
     color:#46f8ff;
     font-size: .16rem;
    }
  .cityRanking .list li:nth-child(odd){

    background: linear-gradient(to right, #073a6d 0%, #032b5f 100%);
  }
  */


  .shopRanking {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .cityRanking {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .cityRanking .title{
    text-align: center;
    color:#fff;
    font-size:.16rem;
    padding-bottom:.2rem;
  }
  .cityRanking .list{
    color:#78c3e9;
    font-size:.12rem;
    height: 80%;
    overflow: hidden;
  }
   .cityRanking .list li{
      padding:.05rem 0;
   }
    .cityRanking .list li{
      display: flex;
      justify-content: space-between;

    }
  .cityRanking .list li .num,.cityRanking .list li .img{
      width:2rem;
      line-height:.14rem;
      height:.14rem;
      display:inline-block;
      text-align: center;
      margin-left:.1rem;
      font-size:.12rem;
      border-radius: .02rem;

      color:#fff;

    }
    .cityRanking .list li .img img{
      width:.2rem;
      margin-left:.05rem;
      height:.16rem;

    }
    .cityRanking .list li .num i{
      display: inline-block;
      padding:.02rem .06rem;
      font-size:.12rem;
    }
     .cityRanking .list li:nth-of-type(2) .num i{
      background:#e52e04;
    }
    .cityRanking .list li:nth-of-type(3) .num i{
      background:#ff6b08;
    }
    .cityRanking .list  li:nth-of-type(4) .num i{
      background:#ffba01;
    }
    .cityRanking .list  li:nth-of-type(5) .num i{
      background:#0071e5;
    }
    .cityRanking .list  li:nth-of-type(6) .num i{
      background:#6224f8;
    }
    .cityRanking .list li:nth-of-type(7) .num i{
      background:#222222;
    }
    .cityRanking .list li .name{
      width:30%;
       text-align: left;
       color:#fff;
       padding-left:5%;

    }
    .cityRanking .list li .danliang{
      width:40%;
       text-align: left;
    }
    .cityRanking .list li i{
     color:#46f8ff;
     font-size: .16rem;
    }
  .cityRanking .list li:nth-child(odd){

    background: linear-gradient(to right, #073a6d 60%, #032b5f 100%);
  }
</style>
